/**
* 图表界面
*/ 
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
    </el-breadcrumb> -->
    <!-- 搜索，切换 -->
    <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
          <el-row :gutter="23">
            <el-col :span="7">
              <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>

            <el-col :span="7" class="stsearch">
              <el-button size="small" type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="vuechart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="javachart"></div>
        </div>
      </el-col>
    
    </el-row>
    <el-row :gutter="23">
      
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="phpchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="reactchart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      //  type: "line",折线图     type: "bar", 柱状/条形图   type: "radar", 雷达图  type: "pie",饼图   type: "doughnut",环形图 
      //   type: "polarArea",极地图   
      // echarts.init(dom, 'dark');  深色模式
      //    dimensions: ['product', '2015', '2016', '2017'],  图表说明 

      // vue进度 
      vueoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: 'VUE学习进度',
        },
        //显示图列
        legend: {
          data: [{
            name: 'java',
            icon: 'rect'
          },
          {
            name: 'vue',
            icon: 'rect'
          }, {
            name: 'react',
            icon: 'rect'
          }, {
            name: 'php',
            icon: 'rect'
          }
          ],
          type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },

        series: [
          {
            name: 'Vue进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 28, name: 'Vue进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#67e0e3'], // 0 到 30% 使用颜色渐变
                        [0.7, '#37a2da'], // 30% 到 70% 使用颜色渐变
                        [1, '#fd666d'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          }
        ]

      },
        //  java 进度
      javaoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: 'java学习进度',
        },
        //显示图列
        legend: {
          data: [{
            name: 'java',
            icon: 'rect'
          },
          {
            name: 'vue',
            icon: 'rect'
          }, {
            name: 'react',
            icon: 'rect'
          }, {
            name: 'php',
            icon: 'rect'
          }
          ],
          type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },

        series: [
          {
            name: 'Java进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 37, name: 'Java进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#0000cd'], // 0 到 30% 使用颜色渐变
                        [0.7, '#6633FF'], // 30% 到 70% 使用颜色渐变
                        [1, '#33FFFF'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          }
        ]

      },
        // react进度
      reactoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: 'React学习进度',
        },
        //显示图列
        legend: {
          data: [{
            name: 'java',
            icon: 'rect'
          },
          {
            name: 'vue',
            icon: 'rect'
          }, {
            name: 'react',
            icon: 'rect'
          }, {
            name: 'php',
            icon: 'rect'
          }
          ],
          type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },

        series: [
         
          {
            name: 'React进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 76, name: 'React进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#FF6699'], // 0 到 30% 使用颜色渐变
                        [0.7, '#FF66FF'], // 30% 到 70% 使用颜色渐变
                        [1, '#9999FF'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          }
        ]

      },
      //php 进度
      phpoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: 'PHP学习进度',
        },
        //显示图列
        legend: {
          data: [{
            name: 'java',
            icon: 'rect'
          },
          {
            name: 'vue',
            icon: 'rect'
          }, {
            name: 'react',
            icon: 'rect'
          }, {
            name: 'php',
            icon: 'rect'
          }
          ],
          type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },

        series: [
        
          {
            name: 'PHP进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 48, name: 'PHP进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#33CC33'], // 0 到 30% 使用颜色渐变
                        [0.7, '#33CCCC'], // 30% 到 70% 使用颜色渐变
                        [1, '#33CCFF'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          },
        ]

      },
    
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getvue()
    this.getphp()
    this.getjava()
    this.getreact()
  },
  // 里面的函数只有调用才会执行
  methods: {
    //vue
    getvue() {
      this.chart = Chart.init(this.$refs.vuechart) //深色模式  ,'dark'
      this.chart.setOption(this.vueoption)
    },
    // 交易总金额
    getphp() {
      this.chart = Chart.init(this.$refs.phpchart)
      this.chart.setOption(this.phpoption)
    },
    // 总点击量
    getjava() {
      this.chart = Chart.init(this.$refs.javachart)
      this.chart.setOption(this.javaoption)
    },
    // 支付方式统计
    getreact() {
      this.chart = Chart.init(this.$refs.reactchart)
      this.chart.setOption(this.reactoption)
    },
   

  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}

.stsearch {
  text-align: center;
}

.text-c {
  text-align: center;
}

.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}

.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>